<template>
  <el-dialog
    :visible.sync="dialogVisible"
    width="50%"
    @close="close">
    <div slot="title">{{ info.type === 1 ? '新增' : '编辑' }}</div>
      <el-form hide-required-asterisk
       :model="refFormData"
       label-width="110px"
       :rules="rules"
        class="label-row"
       ref="refForm">
        <el-form-item prop="access_token" label="access_token">
          <el-input clearable
                    size="small"
                    autofocus
                    v-model="refFormData.access_token" placeholder="access_token"></el-input>
        </el-form-item>

        <el-form-item prop="app_secret" label="app_secret">
          <el-input clearable
           size="small"
                    autofocus
                    v-model="refFormData.app_secret" placeholder="app_secret"></el-input>
        </el-form-item>
        <el-form-item prop="app_id" label="app_id">
          <el-input clearable
           size="small"
                    autofocus
                    v-model="refFormData.app_id" placeholder="app_id"></el-input>
        </el-form-item>
        <el-form-item prop="status" label="状态" v-if="info.type !== 1">
          <el-input clearable
           size="small"
                    autofocus
                    v-model="refFormData.status" placeholder="status"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="warning" @click="close()">取消</el-button>
        <el-button type="success" @click="submit('refForm')">保存</el-button>
      </span>
  </el-dialog>
</template>

<script>
  export default {
    name:'dialogBox',
    props: {
      info : {
        type: Object,
        default: () => ({
        })
      }
    },
    data(){
      return {
        dialogVisible: true,
        refFormData:{
          "access_token": "",
          "app_secret": "",
          "app_id": 2,
        },
        rules: {
          name: [
            { required: true, message: '', trigger: 'blur' },
            { min: 1, max: 30, message: '', trigger: 'blur' }
          ],
        },
        list: []
      };
    },
    mounted(){
      this.refFormData = {
        ...this.info
      }
    },
     methods: {

     /**
      * @Desc 数据提交
      * */
      async submit(formName){
        this.$refs[formName].validate(async (valid) => {
          if (!valid) return
          const params = {
            ...this.refFormData
          }
          console.log(params)
          const { data } = await this.$api.roi[this.info.type === 1 ? 'tokenCreate' : 'tokenUpdate'](params)
          const { code } = data
          if(code !== 200 ) return this.$message.warning('数据不合法')
          this.$emit('getList')
          this.close()

        })
      },

     /**
      * @Desc 关闭
      * @params {String}
      * @return {Object}
      * */
      close(){
        this.$emit('close')
      }
    },
  }
</script>

<style lang='less' scoped>
  .el-button{
      width: 80px;
      height: 35px;
      padding:6px 20px;
    }
</style>
